<template>
	<view class="page flex-col">
		<view class="box_1 flex-col">
			<view class="block_9 flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>

				<view class="block_11 flex-row justify-between">
					<view class="text-wrapper_10" @click="my_points">
						<image style="width: 20rpx;height: 21rpx;" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fbc8896e1b2195f7434d09b1b975e1474c64c2e8.png" mode=""></image>
						<text class="text_45">积分</text>
						<text class="text_46">{{jifen}}</text>
					</view>
					<!-- <text class="text_47" @click="getPointBySignUp">每日签到</text> -->
					<text class="text_47" @click="my_click">我的兑换</text>
				</view>

			</view>
			<view class="block_12 flex-col">
				<view class="text-wrapper_11 flex-row justify-between">
					<text class="text_48">积分专区</text>
					<text class="text_49" @click="PointsZone">更多</text>
				</view>
				<!-- <view class="group_3 flex-row justify-end"> -->
				<view class="group_3 ">
					<view class="group_4 flex-col" v-for="(item, index) in looplist" :key="index"
						@click="Redemption(item)">
						<view class="box_6 flex-col">
							<image class="image_10" referrerpolicy="no-referrer" :src="item.goods_image" />
							<text class="text_52">仅剩{{item.else_stock}}件</text>
						</view>
						<view class="text_53">
							<view class="text_jifen">
								{{item.goods_name}}
							</view>
						</view>
						<view class="text-wrapper_13">
							<view class="wrapper_left">
								<text class="text_54">{{item.need_points}}</text>
								<text class="text_55">积分</text>
							</view>
							<view class="text_56">¥{{item.price}}</view>
						</view>
					</view>
				</view>
				<view class="image_12">
					<u-swiper :list="list1" @click="click" height="200rpx" radius='20rpx'></u-swiper>
				</view>
				<!-- <image class="image_12" referrerpolicy="no-referrer"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/449b099d92fa55e4f52c7252c54550d8b264c60a.png" /> -->
			</view>
			<!-- <view class="block_1 flex-col">
				<view class="text-wrapper_3 flex-row justify-between">
					<text class="text_7">推荐商城</text>
					<text class="text_8" @click="RecommendedMall">更多</text>
				</view>
				<view class="block_4">	
					<view class="box_2 flex-col justify-between"  v-for="(item, index) in malllist" :key="index" @click="Redemption">
						<view class="image-wrapper_1 flex-col">
							<image class="image_2" referrerpolicy="no-referrer"
								:src="item.img" />
						</view>
						<text class="text_9">{{item.name}}</text>
						<view class="text-wrapper_4">
							<text class="text_11">{{item.quantity}}</text>
							<text class="text_12">积分+</text>
							<text class="text_13">¥</text>
							<text class="text_14">{{item.money}}.</text>
							<text class="text_15">00</text>
						</view>
					</view>
				</view>
			</view> -->
			<view v-if="qiandao" class="" style="width: 100%;height: 100vh;background-color: rgba(29, 29, 29, 0.5);position: absolute;top: 0;z-index: 9;">
				
			</view>
			<view class="" v-if="qiandao" >
				<view style="position: absolute;top: 87%;left: 41%;z-index: 999;color: #f8654e;font-size: 26rpx;">
					+{{jf}}积分
				</view>
				<image  style="width: 478rpx;height: 678rpx;position: absolute;top: 43%;left: 18%;z-index: 99;"
				 src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/0f658cd1ffa715d67f8508edebac449b4f4cc333.png" @click="qiandaolist()"
					mode=""></image>
			</view>
			
		</view>
	</view>
</template>
<script>
	const train = require("@/api/train/index.js");
	const index = require('@/api/personal/index.js')
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				jf:"",
				qiandao:false,
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "积分商城",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				looplist: [],
				malllist: [{
						quantity: 50,
						name: '豆浆机家用小型',
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8ed1124963328aafb5b9b76a024de4f478d997c6.png',
						sum: 1,
						money: 80

					},
					{
						quantity: 50,
						name: '豆浆机家用小型',
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8ed1124963328aafb5b9b76a024de4f478d997c6.png',
						sum: 1,
						money: 80
					},
					{
						quantity: 50,
						name: '豆浆机家用小型',
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8ed1124963328aafb5b9b76a024de4f478d997c6.png',
						sum: 1,
						money: 80
					},
					{
						quantity: 50,
						name: '豆浆机家用小型',
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/8ed1124963328aafb5b9b76a024de4f478d997c6.png',
						sum: 1,
						money: 80
					}
				],
				constants: {},
				jifen: '',
				list1: [
					'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/449b099d92fa55e4f52c7252c54550d8b264c60a.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			};
		},
		onLoad() {
			// uni.setNavigationBarTitle({
			// 	title: '积分商城'
			// });
			this.showCoupons()
			this.getPoints()
			this.getBanner()
		},
		onShow() {
			this.showCoupons()
			this.getPoints()
			this.getBanner()
		},
		methods: {
			qiandaolist(){
				this.qiandao = false
			},
			async getBanner() {
				let that = this
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let result = await index.getBanner(data)
				if (result.code == 1) {
					this.list1 = result.data.result
				}
			},
			click(e) {
				if (e == 0) {
					this.getPointBySignUp()
				}
			},
			my_click() {
				uni.navigateTo({
					url: './exchange_record'
				})
			},
			my_points() {
				uni.navigateTo({
					url: '../../pages_other/my-points/my-points'
				})
			},
			// 列表循环
			async showCoupons() {
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					limit: 4,
					page: 1,
					open_id: uni.getStorageSync('openid'),
				}
				let res = await train.getProduct(params)
				if (res.code === 1) {
					this.looplist = res.data.result.data

				}
			},

			// 我的积分
			async getPoints() {
				let params = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync('openid'),
				};
				let res = await index.getPoints(params);
				if (res.code === 1) {
					this.jifen = res.data.result
				}
			},
			// 每日签到
			async getPointBySignUp() {
				let params = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync('openid'),
				};
				let res = await index.getPointBySignUp(params);
				if (res.code === 1) {
					this.jf = res.data.points
					this.getPoints()
					this.qiandao = true
					// uni.showToast({
					// 	title: '签到成功',
					// 	icon: 'exception',
					// 	duration: 850
					// });
				} else {
					uni.showToast({
						title: res.info,
						icon: 'exception',
						duration: 850
					});
				}
			},
			PointsZone() {
				uni.navigateTo({
					url: './points_zone'
				})
			},
			RecommendedMall() {
				uni.navigateTo({
					url: './recommended'
				})
			},
			Redemption(item) {
				uni.navigateTo({
					url: './redemption_details?id=' +
						item.id
				})
			}
		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		/* overflow: hidden; */




		.box_1 {
			height: 100%;
			/* background: url(/static/lanhu_jifenshangcheng/psbu2dlvtxyw9btn72o8lak6b1iuqcxqd3kd3c5b6da-37e6-455a-a9a6-225903585159.png) 100% no-repeat; */
			/* background-size: 100% 100%; */
			width: 750rpx;
			position: relative;

			.block_12 {
				/* height: 787rpx; */
				min-height: 787rpx;
				background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/146ada552c98c04cafc679287d3dfb35c5ea64b5.png') -337rpx 0rpx no-repeat;
				background-size: 1430rpx 787rpx;
				width: 750rpx;
				position: absolute;
				left: 0;
				top: 315rpx;

				.text-wrapper_11 {
					width: 687rpx;
					height: 31rpx;
					margin: 228rpx 0 0 31rpx;

					.text_48 {
						width: 126rpx;
						height: 31rpx;
						overflow-wrap: break-word;
						color: rgba(50, 50, 50, 1);
						font-size: 32rpx;
						font-family: PingFang-SC-Bold;
						font-weight: 700;
						text-align: left;
						white-space: nowrap;
						line-height: 32rpx;
					}

					.text_49 {
						width: 46rpx;
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(245, 64, 41, 1);
						font-size: 30rpx;
						font-family: PingFang-SC-Bold;
						font-weight: 700;
						text-align: left;
						white-space: nowrap;
						line-height: 24rpx;
						margin-top: 4rpx;
					}
				}

				.group_3 {
					/* position: relative; */
					width: 100%;
					/* height: auto; */
					min-height: 1000rpx;
					margin: 39rpx 0 10rpx 10rpx;
					/* background-color: aqua; */



					.group_4 {
						background-color: rgba(255, 255, 255, 1);
						border-radius: 10rpx;
						width: 335rpx;
						height: 459rpx;
						border: 1px solid rgba(229, 229, 229, 1);
						margin-left: 20rpx;
						margin-top: 20rpx;
						float: left;

						.box_6 {
							background-color: rgba(243, 243, 243, 1);
							border-radius: 10px 0px 0px 10px;
							width: 335rpx;
							height: 335rpx;
							border-radius: 10rpx;

							.image_10 {
								width: 230rpx;
								height: 217rpx;
								margin: 59rpx 0 0 47rpx;
							}

							.text_52 {
								width: 87rpx;
								height: 23rpx;
								overflow-wrap: break-word;
								color: rgba(190, 190, 190, 1);
								font-size: 24rpx;
								font-family: PingFang-SC-Regular;
								font-weight: NaN;
								text-align: left;
								white-space: nowrap;
								line-height: 39rpx;
								margin: 17rpx 0 19rpx 227rpx;
							}
						}

						.text_53 {
							width: 100%;
							height: 60rpx;
							margin: 18rpx 0 0 20rpx;

							.text_jifen {
								color: rgba(51, 51, 51, 1);
								width: 300rpx;
								line-height: 28rpx;
								font-size: 28rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.text-wrapper_13 {
							width: 330rpx;
							height: 50rpx;
							font-weight: 500;
							line-height: 36rpx;
							/* background-color: aqua; */
							margin-top: 36rpx;

							.wrapper_left {
								float: left;
								margin-left: 20rpx;

								.text_54 {
									/* width: 117rpx;
									height: 30rpx; */
									color: rgba(246, 32, 32, 1);
									font-size: 36rpx;
									font-weight: 500;
									line-height: 36rpx;
								}

								.text_55 {
									/* width: 50rpx;
									height: 30rpx; */
									color: rgba(246, 32, 32, 1);
									font-size: 24rpx;
									font-weight: 500;
									line-height: 24rpx;
								}
							}


							.text_56 {
								width: 117rpx;
								height: 50rpx;
								color: rgba(156, 156, 156, 1.0);
								font-size: 24rpx;
								font-weight: 500;
								line-height: 50rpx;
								float: right;
								text-decoration: line-through;
								text-align: right;
							}

						}
					}

				}

				.image_12 {
					position: absolute;
					left: 31rpx;
					top: -32rpx;
					width: 688rpx;
					height: 220rpx;
				}
			}

			.block_1 {
				/* position: relative; */
				width: 750rpx;
				/* height: auto; */
				min-height: 300rpx;
				margin-top: 660rpx;
				justify-content: flex-center;
				/* margin: 145rpx 0 0 49rpx; */

				.text-wrapper_3 {
					width: 687rpx;
					height: 30rpx;
					margin: 40rpx 0 0 31rpx;

					.text_7 {
						width: 127rpx;
						height: 30rpx;
						overflow-wrap: break-word;
						color: rgba(50, 50, 50, 1);
						font-size: 32rpx;
						font-family: PingFang-SC-Bold;
						font-weight: 700;
						text-align: left;
						white-space: nowrap;
						line-height: 32rpx;
					}

					.text_8 {
						width: 46rpx;
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(245, 64, 41, 1);
						font-size: 24rpx;
						font-family: PingFang-SC-Bold;
						font-weight: 700;
						text-align: left;
						white-space: nowrap;
						line-height: 24rpx;
						margin-top: 7rpx;
					}
				}

				.block_4 {
					width: 100%;
					height: 254rpx;
					margin: 40rpx 10rpx 0 10rpx;

					.box_2 {
						width: 211rpx;
						height: 300rpx;
						float: left;
						margin-left: 25rpx;
						margin-top: 30rpx;

						.text-wrapper_4 {
							width: 169rpx;
							height: 24rpx;
							overflow-wrap: break-word;
							font-size: 0;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 34rpx;

							.text_11 {
								width: 169rpx;
								height: 24rpx;
								overflow-wrap: break-word;
								color: rgba(246, 32, 32, 1);
								font-size: 28rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
							}

							.text_12 {
								width: 169rpx;
								height: 24rpx;
								overflow-wrap: break-word;
								color: rgba(246, 32, 32, 1);
								font-size: 22rpx;
								font-family: PingFang-SC-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
							}

							.text_13 {
								width: 169rpx;
								height: 24rpx;
								overflow-wrap: break-word;
								color: rgba(246, 32, 32, 1);
								font-size: 22rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
							}

							.text_14 {
								width: 169rpx;
								height: 24rpx;
								overflow-wrap: break-word;
								color: rgba(246, 32, 32, 1);
								font-size: 28rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
							}

							.text_15 {
								width: 169rpx;
								height: 24rpx;
								overflow-wrap: break-word;
								color: rgba(246, 32, 32, 1);
								font-size: 22rpx;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
							}
						}

						.image-wrapper_1 {
							background-color: rgba(247, 247, 248, 1);
							border-radius: 8px;
							height: 211rpx;
							width: 211rpx;

							.image_2 {
								width: 79rpx;
								height: 118rpx;
								margin: 47rpx 0 0 66rpx;
							}
						}

						.text_9 {
							width: 193rpx;
							height: 23rpx;
							overflow-wrap: break-word;
							color: rgba(64, 64, 64, 1);
							font-size: 24rpx;
							font-weight: NaN;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin: 20rpx 0 0 2rpx;
						}
					}
				}

			}

			.block_9 {
				/* position: absolute; */
				/* left: 0;
				top: 0 */
				;
				width: 750rpx;
				height: auto;
				/* height: 230rpx; */
				background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/338bbb664f46343f98e219a8c6bee5c660ade1c7.png') 100% no-repeat;
				background-size: 100% 100%;


				.image_9 {
					width: 654rpx;
					height: 22rpx;
					margin: 33rpx 0 0 48rpx;
				}

				.nav-bar_1 {
					width: 747rpx;
					height: 95rpx;
					margin-top: 28rpx;

					.group_2 {
						height: 37rpx;
						width: 185rpx;
						margin: 30rpx 0 0 30rpx;

						.block_10 {
							width: 185rpx;
							height: 37rpx;

							.icon_1 {
								width: 20rpx;
								height: 37rpx;
							}

							.text_44 {
								width: 146rpx;
								height: 34rpx;
								overflow-wrap: break-word;
								color: rgba(255, 255, 255, 1);
								font-size: 36rpx;
								font-family: PingFang-SC-Regular;
								font-weight: NaN;
								text-align: left;
								white-space: nowrap;
								line-height: 36rpx;
								margin-top: 1rpx;
							}
						}
					}

					.applet-top-bar_1 {
						width: 150rpx;
						height: 55rpx;
						margin: 24rpx 27rpx 0 355rpx;
					}
				}

				.block_11 {
					width: 687rpx;
					height: 41rpx;
					margin: 31rpx 0 701rpx 31rpx;

					.text-wrapper_10 {
						width: 124rpx;
						height: 39rpx;
						overflow-wrap: break-word;
						font-size: 0;
						font-family: DIN-Bold;
						font-weight: 700;
						text-align: left;
						white-space: nowrap;
						line-height: 33rpx;

						.text_45 {
							width: 124rpx;
							height: 39rpx;
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 40rpx;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 33rpx;
						}

						.text_46 {
							width: 124rpx;
							height: 39rpx;
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 22rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 33rpx;
						}
					}

					.text_47 {
						width: 86rpx;
						height: 21rpx;
						overflow-wrap: break-word;
						color: rgba(255, 255, 255, 1);
						font-size: 22rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 33rpx;
						margin-top: 20rpx;
					}
				}


			}
		}
	}
</style>
